<template>
  <view style="position: relative" >
    <view class="mask" @click="close" :catchtouchmove="true"/>
    <view class="couponBox">
      <view class="title flex a-item j-content">优惠详情</view>
      <view>
        <scroll-view style="height: 800rpx;"  :show-scrollbar="false" class="scroll-Y" enhanced scroll-y="true" >
          <view class="couponItem flex a-item" style="height: 100rpx">
            <view class="a-item fl6" @tap="define({id:null,isSatisfy:true})">不使用优惠券</view>
            <view class="radioBox flex a-item j-content fl1">
              <view class="radioMask" @tap="define({id:null,isSatisfy:true})" />
              <radio value="r1" style="transform:scale(0.7)"  :checked="currentCoupon.id === null" />
            </view>
          </view>
          <view class="flex flex-column" v-for="item in customerCouponList" :key="item.id" @tap="define(item)">
            <view class="couponItem flex">
              <view class="whiteMask" v-if="!item.isSatisfy"/>
              <view class="amountBox"  v-if="item.type === 1">
                <view class="amount">{{ item.deductAmount }}</view>
              </view>
              <view class="condition flex flex-column" >
                  <view class="meetWithGoods" v-if="item.type === 2">赠送{{item.giftGoodsName}}</view>
                <view class="couponType"  v-if="item.type === 1">{{ couponType }}满{{ item.effectAmount }}元可使用</view>
<!--                <view class="couponDate">2023-01-13至2023-05-16</view>-->
              </view>
              <view class="radioBox flex a-item j-content" >
                <view class="radioMask" @tap="define({id:null,isSatisfy:true})" />
                <radio  value="r1" style="transform:scale(0.7)"  :checked="item.id === currentCoupon.id" />
              </view>
            </view>
            <view class="error" v-if="!item.isSatisfy">
              本单不可用原因<br />{{ item.errorMessage }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="define" @tap="close">确定</view>
  </view>
</template>

<script>
export default {
  name: "selectCoupon",
  data(){
    return{
      couponType:'订单',
    }
  },
  props:{
    currentCoupon:{
      type:Object,
      default:{}
    },
    customerCouponList:{
      type:Array,
      default: ()=>[]
    }
  },
  methods:{
    close(){
      this.$emit('closeCouponPopup')
    },
    define(obj){
      if (!obj.isSatisfy)return
      this.$emit('update:currentCoupon',obj)
    }

  }
}
</script>

<style lang="scss" scoped>
.couponBox{
  background: white;
  width: 750rpx;
  min-height: 900rpx;
  padding: 20rpx 20rpx 0;
  position: relative;
  z-index: 99;
  .title{
    width: 100%;
    height: 60rpx;
    font-size: 32rpx;
  }
  .error{
    color: red;
    font-size: 22rpx;
    margin-left: 10rpx;
    padding-bottom: 20rpx;
  }
  .couponItem{
    height: 130rpx;
    border-top: rgba(0,0,0,0.1) 1px solid;
    position: relative;
    .meetWithGoods{
      font-size: 25rpx;
      color: red;
    }
    .amountBox{
      width: 200rpx;
      height: 100%;
      .amount{
        color: #FA4747;
        height: 100%;
        width: 160rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:50rpx;
        font-weight: bold;
        position: relative;
        &:before{
          content: '￥';
          font-size: 30rpx;
          font-weight: lighter;
        }
      }
    }
    .condition{
      height: 90rpx;
      width: 400rpx;
      margin: auto 0;
      justify-content: space-evenly;
      .couponDate{
        color: rgba(0,0,0,.4);
        font-size: 25rpx;
      }
    }
    .radioBox{
      width: 100rpx;
      height: 100%;
      position: absolute;
      right: 20rpx;
      .radioMask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
      }
    }
    .whiteMask{
      background: rgba(250,250,250,0.5);
      position: absolute;
      width: 750rpx;
      top:0;
      height: 100rpx;
      z-index: 100;
    }

  }
}
.define{
  width: 100%;
  height: 100rpx;
  background: red;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40rpx;
  z-index: 9999;
}
.mask{
  position: fixed;
}
</style>
